<extend name="./public/local.html"/>
<block name="content">
    <div class="net-platform">
        <div class="container" id="contain"></div>
        <div class="search_plate">
            <div class="car_plate layui-row bs20">
                <div class="layui-col-xs9 ipt-plate">
                    <input type="text" class="ipt-plate" id="plate" placeholder="搜索车牌号"/>
                </div>
                <div class="layui-col-xs3 layui-row h_100">
                    <div class="layui-col-xs6 h_100 "><button class="reset">取消</button></div>
                    <div class="layui-col-xs6 icon" id="search_plate"></div>
                </div>
            </div>
            <ul class="car_filter car_filter_m bs20">
                <li class="icon"></li><li class="icon-text">筛选</li>
            </ul>
        </div>
        <div class="filter">
            <ul class="bs10">
                <li class="title">
                    <ul class="car_filter h_100">
                        <li class="icon"></li>
                        <li class="icon-text">筛选</li>
                        <li class="reset"><button>恢复</button></li>
                    </ul>
                    <span class="filter-close">
                            <span id="close"><i class="close"></i></span>
                        </span>
                </li>
                <li class="content layui-row">
                    <ul class="layui-form">
                        <li class="layui-col-xs3">
                            <span class="text">省</span>
                            <select class="layui-input" lay-filter="region" id="province" data-id="city" data-level="1">
                                <option value="">请选择</option>
                                <volist name="provinces" id="province">
                                    <option value="{$province['region_id']}">{$province['region_name']}</option>
                                </volist>
                            </select>
                        </li>
                        <li class="layui-col-xs3">
                            <span class="text">市</span>
                            <select class="layui-input" lay-filter="region" id="city" data-id="area">
                                <option value="">请选择</option>
                            </select>
                        </li>
                        <li class="layui-col-xs3">
                            <span class="text">县</span>
                            <select class="layui-input" lay-filter="region" id="area">
                                <option value="">选填</option>
                            </select>
                        </li>
                        <li class="layui-col-xs3">
                            <button class="layui-btn" id="search">查询</button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="car_global bs10" id="statistic">
            <ul>
                <li class="fs26">总车辆：<span id="total"></span>辆</li>
                <li class="fs20 order">接单中：<span id="taking"></span>辆</li>
                <li class="fs20 trip">行程中：<span id="trip"></span>辆</li>
                <li class="fs20 offline">离线车辆：<span id="offline"></span>辆</li>
            </ul>
        </div>
    </div>
    <script type="application/javascript">
        var layer,inner,inter;
        layui.use(['form','layer'], function () {
            var form = layui.form,$ = layui.jquery;
            layer = layui.layer;
            form.on('select(region)', function(data){
                var id = $(data.elem).attr('id');
                var index = $(data.elem).data('id');
                var level = $(data.elem).data('level');
                var parent_id = data.value;
                if(!parent_id > 0 || id==='area'){
                    return;
                }
                ajax(parent_id,index,form,level);
            });
            //筛选按钮
            $('.car_filter_m').on('click', function () {
                $('.search_plate').hide();
                $('.filter').show();
            });
            //关闭按钮
            $('#close').on('click', function () {
                $('#province').val('');
                $('#city').html("<option value=''>请选择</option>");
                $('#area').html("<option value=''>选填</option>");
                form.render('select');
                $('.filter').hide();
                $('.search_plate').show();
            });
            //车牌搜索按钮
            $('#search_plate').on('click',function () {
                search_plate();
            });
            //车牌搜索取消按钮
            $('.car_plate .reset').on('click',function () {
                clearInterval(timeVal);
                inner = sign = inter = undefined;
                map.setZoomAndCenter(level,center);
                $(this).hide();
                $('#plate').val('');
            });
            //区域搜索按钮
            $('#search').on('click', function () {
                search_region();
            });
        });
    </script>
    <include file="driver/amap"/>
    <script type="application/javascript">
        function driver_info(obj) {
            var id = $(obj).data('id');
            var type = $(obj).data('type');
            window.open('{$url}'+'?driver_id='+id+'&type='+type,'_blank');
        }
        function ajax(parent_id,index,form,level) {
            var op = index==='city'?'请选择':'选填';
            var select = $("#"+index);
            $.post("{:url('getRegion')}",{parent_id:parent_id,type:index},function (re) {
                if(re['status']==1){
                    var str = "<option value=''>"+op+"</option>";
                    re['data'].forEach(function (item,index,input) {
                        str += "<option value='"+item['region_id']+"'>"+item['region_name']+"</option>";
                    });
                    select.html(str);
                    if(level===1){
                        var third = $('#'+select.data('id'));
                        third.html("<option value=''>选填</option>");
                    }
                    form.render('select');
                }
            },'json')
        }
        function search_plate() {
            var plate = $('#plate').val().replace(/(^\s*)|(\s*$)/g, "");
            if(!plate){
                layer.alert('请输入车牌号',{icon:2});
                return false;
            }
            clearInterval(timeVal);
            $.post('{$url_plate}',{plate:plate},function (res) {
                if(res['status']){
                    if(res['inner']){inner = res['inner'];}
                    if(res['inter']){inter = res['inter'];}
                    sign = 'plate';
                    tip('加载数据，请稍候...');
                    combine(sign);
                    $('.car_plate .reset').show();
                }else{
                    layer.alert(res['msg']);
                }
            });
        }
        function search_region() {
            var province = $('#province'),city = $('#city'),area = $('#area');
            var direct_id = [2,3,10,23],flag=false;
            direct_id.forEach(function (item) {
                if(item==province.val()) {
                    flag = true;
                    return false;
                }
            });
            if(!city.val() && !flag){
                layer.alert('请至少选择一个城市',{icon:2});
                return false;
            }
            var region_name = area.val() ? area.find("option:selected").text() : city.find("option:selected").text();
            if(flag){
                region_name = province.find("option:selected").text();
                if(city.val()){
                    if(!area.val()){
                        layer.alert('请选择具体的直辖市市辖区',{icon:2});
                        return false;
                    }
                    region_name = area.find("option:selected").text();
                }
            }
            inner = sign = inter = undefined;
            map.setCity(region_name);
            tip('加载数据，请稍候...');
            $('.car_plate .reset').hide();
            $('#plate').val('');
        }
    </script>
</block>